import React from 'react'
import { Form, Button, Input, Space } from 'antd'
import styles from './ChangePassword.less'
class Index extends React.Component {
    constructor(props) {
        super(props)
        this.refform = React.createRef()
    }
    onFinish = (values) => {
    }

    //重置按钮
    reset = () => {
        this.refform.current.resetFields()
    }
    render() {
        let form = {
            labelCol: { span: 4, offset: 0 },

        }
        return (
            <div className={styles.totall}>
                <Form
                    name='changepassword'
                    style={{ width: '700px' }}
                    {...form}
                    ref={this.refform}
                    onFinish={this.onFinish}
                >
                    <Form.Item label='原密码' name='password' style={{marginBottom:"30px"}}
                        rules={[{ required: true, message: '请输入原密码' }]}
                    >
                        <Input.Password placeholder='请输入原密码' />
                    </Form.Item>
                    <Form.Item label='新密码' name='newpassword' style={{marginBottom:"30px"}}
                        rules={[{ required: true, message: '请输入新密码' }, { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/, message: '密码至少8-20位个字符，至少一个大写字母，一个小写字母和一个数字' }]}
                    >
                        <Input.Password placeholder='密码至少8-20个字符，至少1个大写字母，1个小写字母和一个数字' />
                    </Form.Item>
                    <Form.Item style={{marginBottom:"30px"}}
                        label='确认新密码' name='confirmpassword' dependencies={['newpassword']}
                        rules={[{ required: true, message: '请确认新密码' }, { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/, message: '请输入符合的密码' },
                        ]}
                    >
                        <Input.Password placeholder='请输入确认密码' />
                    </Form.Item>
                    <Form.Item>
                        <Space>
                            <Button type='primary' htmlType='submit' onClick={this.onFinish}>提交</Button>
                            <Button onClick={this.reset}>重置</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default Index